<template>
  <div>
    <!-- 添加或修改产品对话框 -->
    <el-dialog :title="diglogTitle" :visible.sync="open" width="90%" append-to-body :close-on-click-modal="false" custom-class="show-back-class">
      <div style="height: 680px">
        <div style="height: 100%;width: 30%;float: left" >
          <el-scrollbar class="stdUnitScrollbarDiv" style="height: 100%;background-color:#545c64;" v-if="menuList.length>0">
            <el-table  ref="menuTreeTableRef" :data="menuList" :show-header="false" default-expand-all
                        row-key="id" highlight-current-row
                        @row-click="clickMenu" row-class-name="treeTableRow"
                        style="background-color: #17506a !important;"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
              <el-table-column label="名称" align="left" prop="name" >
                <template slot-scope="scope">
                  <i v-if="scope.row.type===1" class="el-icon-location"></i>
                  <span >{{ scope.row.name}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
        <div style="height: 100%;width: 70%;;float: left">
          <!-- :product-id="form.productId" v-if="form.productId" -->
          <fossil-fuel ref="fossilFuelRef" v-if="showId == 10 || showId == 11"/>
          <fossil-fuel2 ref="fossilFuel2Ref" v-if="showId == 12"/>
          <fossil-fuel3 ref="fossilFuel3Ref" v-if="showId == 13"/>
          <ele-emission ref="eleEmissionRef" v-if="showId == 14 || showId == 15"/>
          <heat-emission ref="heatEmissionRef" v-if="showId == 16"/>
          <carbon-emissions ref="carbonEmissionsRef" v-if="showId == 17 || showId == 18"/>
          <carbon-emissions2 ref="carbonEmissions2Ref" v-if="showId == 19"/>
          <carbon-emissions3 ref="carbonEmissions3Ref" v-if="showId == 20"/>
          <carbon-emissions4 ref="carbonEmissions4Ref" v-if="showId == 21"/>
          <carbon-emissions5 ref="carbonEmissions5Ref" v-if="showId == 22"/>
          <ccer-trade ref="ccerTradeRef" v-if="showId == 23 || showId == 24" />
          <carbon-trade ref="carbonTradeRef" v-if="showId == 25" />
          <carbon-offset ref="carbonOffsetRef" v-if="showId == 26  || showId == 27" />
          <carbon-offset2 ref="carbonOffset2Ref" v-if="showId == 28" />
          <carbon-offset3 ref="carbonOffset3Ref" v-if="showId == 29" />
          <carbon-analysis ref="carbonAnalysisRef" v-if="showId == 30" />
          <dimensions-analysis ref="dimensionsAnalysisRef" v-if="showId == 31" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="margin-top: 10px"></div>
    </el-dialog>

  </div>

</template>

<script>
import fossilFuel from '@/views/bigScreen/fossilFuel/fossilFuel';
import fossilFuel2 from '@/views/bigScreen/fossilFuel/fossilFuel2';
import fossilFuel3 from '@/views/bigScreen/fossilFuel/fossilFuel3';
import eleEmission from '@/views/bigScreen/eleAndHeat/eleEmission';
import heatEmission from '@/views/bigScreen/eleAndHeat/heatEmission';
import carbonEmissions from '@/views/bigScreen/carbonEmissions/carbonEmissions';
import carbonEmissions2 from '@/views/bigScreen/carbonEmissions/carbonEmissions2';
import carbonEmissions3 from '@/views/bigScreen/carbonEmissions/carbonEmissions3';
import carbonEmissions4 from '@/views/bigScreen/carbonEmissions/carbonEmissions4';
import carbonEmissions5 from '@/views/bigScreen/carbonEmissions/carbonEmissions5';
import ccerTrade from '@/views/bigScreen/carbonTrade/ccerTrade';
import carbonTrade from '@/views/bigScreen/carbonTrade/carbonTrade';
import carbonOffset from '@/views/bigScreen/carbonOffset/carbonOffset';
import carbonOffset2 from '@/views/bigScreen/carbonOffset/carbonOffset2';
import carbonOffset3 from '@/views/bigScreen/carbonOffset/carbonOffset3';
import carbonAnalysis from '@/views/bigScreen/carbonAnalysis/index';
import dimensionsAnalysis from '@/views/bigScreen/dimensionsAnalysis/index';
export default {
  name: "ProductCarbonStageForm",
  components:{
    fossilFuel,fossilFuel2,fossilFuel3,eleEmission,heatEmission,carbonEmissions,
    carbonEmissions2,carbonEmissions3,carbonEmissions4,carbonEmissions5,ccerTrade,
    carbonTrade,carbonOffset,carbonOffset2,carbonOffset3,carbonAnalysis,dimensionsAnalysis
  },
  data() {
    return {
      open: false,
      diglogTitle: '',
      menuList:[],
      showId: 0
    };
  },
  created() {
  },
  methods: {
    handleShow(row) {
      // this.menuList = row;
      // this.open = true;
      this.menuList=[
        {
          name: '化石燃料',
          parentId: 100,
          id: 10,
          type: 1,
          children:[
            {name: '固体燃料',parentId:10, id: 11, type: 2, children: null},
            {name: '液体燃料',parentId:10, id: 12, type: 2, children: null},
            {name: '气体燃料',parentId:10, id: 13, type: 2, children: null},
          ]
        },
        {
          name: '电力电热',
          parentId: 101,
          id: 14,
          type: 1,
          children:[
            {name: '电力排放',parentId:14, id: 15, type: 2, children: null},
            {name: '热力排放',parentId:14, id: 16, type: 2, children: null},
          ]
        },
        {
          name: '过程排放',
          parentId: 102,
          id: 17,
          type: 1,
          children:[
            {name: '脱硫',parentId:17, id: 18, type: 2, children: null},
            {name: '脱硝',parentId:17, id: 19, type: 2, children: null},
            {name: '炸药',parentId:17, id: 20, type: 2, children: null},
            {name: '切焊加热',parentId:17, id: 21, type: 2, children: null},
            {name: '直接释放',parentId:17, id: 22, type: 2, children: null},
          ]
        },
        {
          name: '碳交易',
          parentId: 103,
          id: 23,
          type: 1,
          children:[
            {name: 'CCER',parentId:23, id: 24, type: 2, children: null},
            {name: '碳惠普',parentId:23, id: 25, type: 2, children: null},
          ]
        },
        {
          name: '碳抵消',
          parentId: 104,
          id: 26,
          type: 1,
          children:[
            {name: '绿化',parentId:26, id: 27, type: 2, children: null},
            {name: '回收利用',parentId:26, id: 28, type: 2, children: null},
            {name: '绿证',parentId:26, id: 29, type: 2, children: null},
          ]
        },
        {
          name: '计算结果',
          parentId: 105,
          id: 30,
          type: 1,
          children:null
        },
        {
          name: '多维分析',
          parentId: 106,
          id: 31,
          type: 1,
          children:null
        },
      ];
      this.diglogTitle = this.menuList[0].name;
      this.showId = this.menuList[0].id;
      this.open = true;
    },
    clickMenu(row, column, event){
      this.showId = row.id;
      this.diglogTitle = row.name;
    },
  }
};
</script>
<style lang="scss">

  .treeTableRow{
    background-color: #092038 !important;
    color: #fff !important;
   .el-icon-arrow-right{
     color: #fff !important;
   }
    td{
      border-bottom:0 solid #dfe6ec  !important;
    }
  }

  .treeTableRow.current-row{
    color: #FEE034 !important;
    td{
      background-color: #545c64 !important;
    }
  }
  .treeTableRow:hover{
    background-color: #3d4349 !important;
    td{
      // background-color: #3d4349 !important;
      background-color: #2496c9 !important;
    }
  }

</style>
